import React from 'react';
import { Typography, Table, Tag, Button, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const { Title } = Typography;

const VaccineList: React.FC = () => {
  // 假数据
  const mockData = [
    {
      key: '1',
      name: '新冠疫苗',
      manufacturer: '科兴生物',
      stock: 100,
      status: 'available',
      price: 200,
    },
    {
      key: '2',
      name: '流感疫苗',
      manufacturer: '华兰生物',
      stock: 50,
      status: 'available',
      price: 150,
    },
    {
      key: '3',
      name: '乙肝疫苗',
      manufacturer: '康泰生物',
      stock: 0,
      status: 'out_of_stock',
      price: 120,
    },
  ];

  const columns = [
    {
      title: '疫苗名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '生产厂家',
      dataIndex: 'manufacturer',
      key: 'manufacturer',
    },
    {
      title: '库存数量',
      dataIndex: 'stock',
      key: 'stock',
    },
    {
      title: '价格(元)',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'available' ? 'green' : 'red'}>
          {status === 'available' ? '有库存' : '缺货'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Space size="middle">
          <Button type="primary" size="small">
            预约
          </Button>
          <Button size="small">详情</Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{ background: '#fff', padding: '24px', borderRadius: '8px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
          <Title level={2} style={{ marginBottom: 0 }}>疫苗列表</Title>
          <Button type="primary" icon={<PlusOutlined />}>
            添加疫苗
          </Button>
        </div>
        
        <Table 
          columns={columns} 
          dataSource={mockData}
          pagination={{ pageSize: 10 }}
          rowKey="key"
        />
      </div>
    </div>
  );
};

export default VaccineList;
